<template>
  <div>
      <!-- MV视频 -->
        <div class="MVbox">
          <div class="box" @click="getMVid(item.id)" v-for="item in this.mvList" :key="item.id">
            <div class="MVimg">
              <img :src="item.cover">
            </div>
            <div class="MVtext">
              <h4>{{item.name}}</h4>
              <p>演唱: {{item.artistName}}</p>
              <p class="playcont"><span class="iconfont icon-bofang1 bf1"></span>{{item.playCount|playCountData}}</p>
            </div>
          </div>
        </div>
  </div>
</template>

<script>

export default {
  props:['mvList'],
  methods:{
    getMVid(id){
      console.log(id)
      this.$emit('getMVid',id)
    },
  },
  created(){
    console.log(this.mvList)
  },
  filters:{
    playCountData(value){
      let w = value > 10000? value / 10000 : value; // 万计算
      let y = w > 10000? parseInt(w/10000)+"亿": parseInt(w) + "万";//亿计算
      return y;
    }
  },
}
</script>

<style lang="less">
  .MVbox{
    .box{
      display: flex;
      padding: 10px 0px;
      margin: 0px 10px;
      border-bottom: 1px solid #ccc;
      .MVimg{
        flex: 4;
        background-color: red;
        margin-right: 10px;
        width: 10%;
        height: 8%;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .MVtext{
        flex: 8;
        h4{
          width: 220px;
          font-size: 18px;
          font-weight: bold;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          // display: inline;
        }
        p{
          font-size: 14px;
          color: #999;
        }
        .playcont{
            font-size: 12px;
          span.bf1{
            font-size: 12px;
          }
        }
      }
    }
  }
</style>